<template>
  <div>
    <!-- 标题栏 -->
    <div class="p-header-index">
      <p class="p-header__title">抖贴-低周波理疗仪</p>
    </div>
    <!-- banner图 -->
    <div class="p-banner">
      <img src="@/assets/img/banner.jpg" alt="低周波理疗仪" />
    </div>
    <div class="m-container g-pt--10">
      <!-- 董事操作栏 -->
      <div class="m-card m-card--boss">
        <div @click="goToBecomeBoss" class="m-boss__item">
          <div class="m-boss__tiem-logo">
            <img src="@/assets/img/logo.png" alt="logo" />
          </div>
          <p class="m-boss__item-title">成为董事</p>
        </div>
        <div @click="goToBossStock" class="m-boss__item">
          <div class="m-boss__tiem-logo">
            <img src="@/assets/img/logo.png" alt="logo" />
          </div>
          <p class="m-boss__item-title">董事补货</p>
        </div>
      </div>
      <!-- icons -->
      <div class="m-card m-card--nav">
        <div class="m-nav-container g-pb--15">
          <div @click="goToBonusBoss" class="m-nav-link">
            <div class="m-nav-link__icon">
              <img src="@/assets/img/dsfh.png" />
            </div>
            <p class="m-nav-link__title">董事分红</p>
          </div>
          <div @click="goToBonusBusiness" class="m-nav-link">
            <div class="m-nav-link__icon">
              <img src="@/assets/img/lcfh.png" />
            </div>
            <p class="m-nav-link__title">联创分红</p>
          </div>
          <div @click="goToBonus" class="m-nav-link">
            <div class="m-nav-link__icon">
              <img src="@/assets/img/qyfh.png" />
            </div>
            <p class="m-nav-link__title">区域分红</p>
          </div>
          <div class="m-nav-link">
            <div @click="goToWithdrawal" class="m-nav-link__icon">
              <img src="@/assets/img/yetx.png" />
            </div>
            <p class="m-nav-link__title">余额提现</p>
          </div>
        </div>
        <div class="m-nav-container">
          <div @click="goToMyTeam" class="m-nav-link">
            <div class="m-nav-link__icon">
              <img src="@/assets/img/wdtd.png" />
            </div>
            <p class="m-nav-link__title">我的团队</p>
          </div>
          <div @click="goToGoodsCenter" class="m-nav-link">
            <div class="m-nav-link__icon">
              <img src="@/assets/img/cpzx.png" />
            </div>
            <p class="m-nav-link__title">产品中心</p>
          </div>
          <div @click="goToServiceCenter" class="m-nav-link">
            <div class="m-nav-link__icon">
              <img src="@/assets/img/kfzx.png" />
            </div>
            <p class="m-nav-link__title">客服中心</p>
          </div>
          <div @click="goToBalanceDetails" class="m-nav-link">
            <div class="m-nav-link__icon">
              <i class="iconfont icon-jiekuanmingxi"></i>
            </div>
            <p class="m-nav-link__title">余额明细</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import UserModel from "@/api/user_model";
import { userModel } from "@/api";
// const userModel = new UserModel();
export default {
  name: "home",
  mounted() {
    /* userModel._getUserInfo().then(res => {
      console.log(res);
    }); */
  },
  methods: {
    goToBecomeBoss() {
      this.$router.push({ name: "become_boss" });
    },
    goToBossStock() {
      this.$router.push({
        name: "boss_stock"
      });
    },
    goToBonusBoss() {
      this.$router.push({
        name: "bonus_boss"
      });
    },
    goToBonusBusiness() {
      this.$router.push({
        path: "/business"
      });
    },
    goToBonus() {
      this.$router.push({
        name: "bonus"
      });
    },
    goToWithdrawal() {
      this.$router.push({
        name: "withdrawal"
      });
    },
    goToMyTeam() {
      this.$router.push({
        name: "my_team",
        params: {
          active: 0
        }
      });
    },
    goToGoodsCenter() {
      this.$router.push({
        name: "goods_center"
      });
    },
    goToServiceCenter() {
      this.$router.push({
        name: "service_center"
      });
    },
    goToBalanceDetails() {
      this.$router.push({
        name: "balance_details"
      });
    }
  }
};
</script>

<style lang="scss">
.p-header-index {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #b7202b;
}
.p-header__title {
  font-size: 16px;
  color: #fff;
}
.p-banner {
  padding: 53.06% 0 0;
  position: relative;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
.m-card--boss {
  padding: 15px 0;
}
.m-boss__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  &:first-child {
    border-right: 2px solid rgba(249, 249, 249, 1);
  }
}
.m-boss__tiem-logo {
  width: 45px;
  height: 50px;
  margin-bottom: 5px;
  & > img {
    width: 100%;
  }
}
.m-boss__item-title {
  color: #b7202b;
  font-size: 18px;
}
.m-card--nav {
  padding: 10px;
  flex-wrap: wrap;
}
.m-nav-container {
  display: flex;
  justify-content: space-around;
}
.m-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-nav-link__title {
  text-align: center;
  line-height: 2;
  font-size: 12px;
}
.m-nav-link__icon {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #b7202b;
  & > .iconfont {
    font-size: 20px;
  }
  img {
    width: 22px;
    height: 22px;
  }
}
</style>
